<template>
    <div>
        <table class="table table-hover" style="text-align: center; vertical-align: middle;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>发布时间</th>
                    <th>发布人</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.id">
                    <td>{{ record.id }}</td>
                    <td>{{ record.title }}</td>
                    <td>{{ record.createtime }}</td>
                    <td>{{ record.author }}</td>
                    <td>
                        <button style="margin-right: 5px;" type="button" class="btn btn-outline-secondary" @click="clickToCheck(record)">查看</button>
                        <button type="button" class="btn btn-outline-primary" disabled>已读</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="...">
            <ul class="pagination" style="float: right;">
                <li class="page-item" @click="click_page(-2)">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>
                <li class="page-item" @click="click_page(-1)">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script setup>
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import router from '@/router';

const store = useStore();
let records = ref([]);
let current_page = 1;
let total_records = 0;
let pages = ref([]);

const clickToCheck = (record) => {
    router.push({
        name: "EventDetail",
        params: {
            id: record.id
        }
    });
}

const click_page = page => {
    if (page === -2) page = current_page - 1;
    else if (page === -1) page = current_page + 1;
    
    let max_pages = parseInt(Math.ceil(total_records / 10))
    if (page >= 1 && page <= max_pages) {
        pull_page(page);
    }
}

const update_pages = () => {
    let max_pages = parseInt(Math.ceil(total_records / 10))
    let new_pages = [];
    for (let i = current_page - 2; i <= current_page + 2; i ++) {
        if (i >= 1 && i <= max_pages) {
            new_pages.push({
                number: i,
                is_active: i === current_page ? "active" : "",
            });
        }
    }
    pages.value = new_pages;
}

const pull_page = page => {
    current_page = page;
    $.ajax({
        url: "http://localhost:3000/api/student/get-read-event",
        type: "GET",
        data: {
            page,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == 'success') {
                records.value = resp.records;
                total_records = resp.records_count;
                update_pages();
                store.commit("updateRecords", resp.records);
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}
pull_page(current_page);

</script>

<style scoped>

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

</style>